<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>安捷能源路由器</title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/showPage1.css}">
    <link rel="stylesheet" th:href="@{/css/keyboard.css}">
    <link th:href="@{/css/jquery-ui.css}" rel="stylesheet">
    <style>

        @media screen and (min-width: 1600px) and (max-width: 1820px){
            .form_img > img {
                margin-top: -7%;
                margin-left: 15%;
            }
            .form_content{
                font-size: 16px;
            }
            #form_content1,#form_content4{
                width: 55%!important;
            }
            .form_content > label{
                margin-left: 4%;
            }
            .formButton{
                top:3%;
                right: 2%;
            }
            .form_content >input{
                margin-left: 2%;
            }
        }

        @media screen and (min-width: 1400px) and (max-width: 1600px){
            .form_img > img {
                margin-top: -7%;
                margin-left: 5%;
            }
            .form_content{
                font-size: 14px;
            }
            #form_content1,#form_content4{
                width: 60%!important;
            }
            .form_content > label{
                margin-left: 4%;
            }
            .formButton{
                top:3%;
                right: 2%;
            }
            .form_content >input{
                margin-left: 2%;
            }
        }

        @media screen and (min-width: 1200px) and (max-width: 1400px){
            .form_img > img{
                margin-left: -7px;
            }
            .form_content{
                font-size: 14px;
            }
            #form_content1,#form_content4{
                width: 60%!important;
            }
            .form_content > label{
                margin-left: 5%;
            }
            .formButton{
                top:3%;
                right: 2%;
            }
            .form_content >input{
                margin-left: 2%;
            }
        }

        @media screen and (min-width: 1000px) and (max-width: 1200px){
            .form_img > img{
                margin-left: -70px;
            }
            #form_content1,#form_content4{
                width: 75%!important;
            }
            #form_content2,#form_content3{
                width: 70%!important;
            }
            .form_content{
                font-size: 13px;
            }
            .formButton{
                top:3%;
                right: -22%;
            }
            .sixLink > a{
                padding-left: 1px;
                padding-right: 1px;
                font-size: 14px;
            }
            #tem1,#tem2,#hum1,#hum2{
                font-size: 14px!important;
                width: 13%!important;
                margin-left: 5px!important;
            }
            #people{
                font-size: 14px!important;
                margin-left: 5px!important;
            }
            .form_content>label{
                margin-left: 8px;
            }
            .form_content>span{
                font-size: 14px!important;
            }
        }

        @media screen and (max-width: 1000px){
            .form_img > img{
                margin-left: -70px;
            }
            #form_content1,#form_content4{
                width: 75%!important;
            }
            #form_content2,#form_content3{
                width: 70%!important;
            }
            .form_content{
                font-size: 13px;
            }
            .formButton{
                top:3%;
                right: -22%;
            }
            .sixLink > a{
                padding-left: 1px;
                padding-right: 1px;
                font-size: 14px;
            }
            #tem1,#tem2,#hum1,#hum2{
                font-size: 14px!important;
                width: 13%!important;
                margin-left: 5px!important;
            }
            #people{
                font-size: 14px!important;
                margin-left: 5px!important;
            }
            .form_content>label{
                margin-left: 8px;
            }
            .form_content>span{
                font-size: 14px!important;
            }
        }

        .tabs {
            width: 100%;
            max-width: 1000px;
            margin: 10px auto;
        }

        .tabs > input {
            opacity: 0;
        }

        .tabs > label {
            cursor: pointer;
            background: #073598;
            color: #eee;
            border-radius: 20px 20px 20px 20px;
            padding: 1% 2%;
            float: left;
            margin-right: 2px;
            height: 20px;
            font-size: 20px;
            line-height: 20px;
            text-align: center;
            z-index: 99;
        }

        .tabs > label:hover {
            background: #073598;
            color: #fff;
        }

        .tabs > input:checked + label {
            background: #056caa;;
            color: #fff;
            margin-left: 0px;
        }

        .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
        .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2) {
            opacity: 1;
            -webkit-transition: .3s;
        }

        .panels {
            float: left;
            /*clear: both;*/
            position: relative;
            width: 100%;
            border-radius: 0 10px 10px 10px;
            min-height: 550px;
        }

        .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            border-radius: 0 10px 10px 10px;
            box-sizing: border-box;
            height: 500px;
            /*border:1px solid red;*/
            padding: 0px;
        }

        .gongkuang{
            height: 300px;
            overflow: auto;
            /*隐藏滚动条*/
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }

        .gongkuang::-webkit-scrollbar {
            /*隐藏滚动条*/
            width: 0 !important
        }

        .gongkuang>div {
            width: 100%;
            margin-left: 0px;
            margin-top: 10px;
        }

        .gongkuang>div>div {
            width: 90%;
            margin-left: 0px;
        }

        .gongkuang>div>img {
            margin-right: 0px;
            margin-left: 0px;
        }

        /*html,body {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/

    </style>
</head>

<body>
<div class="top">
    <h2>安捷能源路由器</h2>
    <div id="timeNow"></div>
    <div class="sixLink">
        <a href="/multipower/index" style="color: white;">首页</a>
        <a href="#" onclick="checkStatus()" style="color: white;">能耗态势</a>
        <a href="/multipower/showpage3" style="color: white;">建模演示</a>
        <a href="/multipower/showpage5" style="color: white;">模型对比</a>
        <a href="/multipower/showpage4" style="color: white;">工况对比</a>
    </div>
</div>
<div class="middle" style="width: 100%;">
    <div class="middle_left" style="width: 22%">
        <div class="middle_left_tittle">
            <div style="margin-left: 45px ">影响因素</div>
        </div>
        <div class="form_img">
            <img th:src="@{/img2/left.png}" alt="">
        </div>
        <form action="" onsubmit="change();return false;">
            <div class="form_content" style="right:12%;width: 55%" id="form_content1">
                <label for="">温度</label>
                <input id="tem1" type="text"
                       style="outline:none;border:0 ;width: 20%;color:#fff;font-weight: 800;font-size: 20px;width: 15%;">
                <span style="top: 0;right: 56%;">~</span>
                <input id="tem2" type="text"
                       style="outline:none;border:0 ;width: 20%;color:#fff;font-weight: 800;font-size: 20px;width: 15%;">
                <span color="#fff" style="margin-left: 0%;font-size: 20px">&#8451;</span>
                <div>
                    <img src="img2/tem.png" alt="">
                </div>
            </div>
            <div class="form_content" style="top:41%;right:6%;width: 55%" id="form_content2">
                <label for="">人数</label>
                <input id="people" type="text"
                       style="outline:none;width: 29%;border:0;color:#fff;font-weight: 500;font-size: 20px;text-align: center">
                <span style="margin-left: 5%;font-size: 20px;color:#fff">人</span>
                <div>
                    <img th:src="@{/img2/renshu.png}" alt="">
                </div>
            </div>
            <div class="form_content" style="top:61%;right:7%;width: 50%" id="form_content3">
                <label for="">天气</label>
                <!--<img th:src="@{/img2/qing.png}" alt="" style="height: 30px;height: 30px;margin-right: 50px;margin-top: 10px" >-->
                <select name="" style="margin-left: 10%;margin-top: 6%;width:25%;height: 50%" id="weather">
                    <option value="1">晴</option>
                    <option value="0">阴</option>
                </select>
                <div>
                    <img th:src="@{/img2/tianqi.png}" alt="">
                </div>
            </div>
            <div class="form_content" style="top:80%;right:14%;width: 55%;" id="form_content4">
                <label for="">湿度</label>
                <!--                <input type="text" style="outline:none;border:0;color:#fff;font-weight: 500;font-size: 16px" >-->
                <input id="hum1" type="text"
                       style="outline:none;border:0 ;width: 15%;color:#fff;font-weight: 800;font-size: 20px;">
                <span style="top: 0%;right: 56%;">~</span>
                <input id="hum2" type="text"
                       style="outline:none;border:0 ;width: 15%;color:#fff;font-weight: 800;font-size: 20px;">
                <span color="#fff" style="margin-left: 0%;font-size: 20px">%</span>
                <div>
                    <img src="img2/humidity.png" alt="">
                </div>
            </div>
            <div class="formButton">
                <!--<input type="submit"  value="采用">-->
                <button type="submit" id="get"
                        style="border-radius: 12.5px;background-color: #3069c0;border: none;color:#fff;">采用
                </button>
            </div>
        </form>
    </div>
    <div class="middle_right" style="width: 78%">
        <div class="middle_m_tittle">能源预测图</div>
        <div style="display: flex;flex-direction: row">
            <div id="lineChart" style="width:50%;height: 250px;"></div>
            <div id="lineChart1" style="width: 50%;height: 250px;"></div>
        </div>
    </div>
</div>
<div class="bottom">

    <div class="bottom_left" id="tupu" style="width: 65%">
<!--        <div class="bottom_left_title">知识图谱图</div>-->
        <!--        知识图谱开始-->
        <div class="tabs" style="width: 100%">
            <input hidden id="one" name="tabs" type="radio" value="One">
            <label hidden id="labelOne" for="one" style="margin-left: -60px">冬季策略</label>
            <input hidden checked id="two" name="tabs" type="radio" value="Two">
            <label hidden id="labelTwo" for="two">夏季策略</label>
            <div class="panels">
                <div class="panel" id="line_direction_chart1"></div>
                <div class="panel" id="line_direction_chart"></div>
            </div>
        </div>
        <!--        知识图谱结束-->
    </div>

    <div class="bottom_right" style="width: 35%;margin-left: 0px">
        <div class="bottom_right_top" style="width: 100%">
            <div class="bottom_right_top_title">策略建议</div>
            <div class="gongkuang"></div>
        </div>
        <div class="bottom_right_bottom">
            <div class="bottom_right_bottom_title" style="float: left">策略库</div>
            <div class="bottom_right_bottom_title" style="width: 200px;float:left">
                写字楼工况模式
            </div>
            <div class="bottom_computer">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <!--                <img src="img2/computer.png" alt="">-->
                <div style="color:#fff;float: right">......</div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/time.js}"></script>
<script th:src="@{/js/topChart.js}"></script>

<!--点击submit采用调用的change()函数所在包-->
<script th:src="@{/js/chart1.js}"></script>

<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/jquery.keyboard.min.js}"></script>
<!--<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>-->
<script th:src="@{/js/jquery-ui-1.10.0.custom.min.js}"></script>
<!--<script th:src="@{/js/spin.js}"></script>-->
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script th:src="@{/js/tools.js}"></script>
<script>

    // window.addEventListener("resize", function () {
    //     mychart.resize();
    //     myChart1.resize();
    // });

    function checkStatus() {
        let flag = window.sessionStorage.getItem("btnStatus");
        console.log("flag");
        console.log(flag);
        if(flag=="true"){
            window.location = "/multipower/showpage2";
        }else {
            window.alert("请先采用策略");
        }
    }
    $(function () {
        draw();
        // topChart1();
        // topChart();
        change0();
        change1();
        topChartLoad();
        topChartLoad1();
        summerIni();
        //获取输入的页面输入的温度和湿度
        var tem1 = document.getElementById("tem1");
        var tem2 = document.getElementById("tem2");
        var hum1 = document.getElementById("hum1");
        var hum2 = document.getElementById("hum2");
        var person = document.getElementById("people");
        tem1.value = "25";
        tem2.value = "32";
        hum1.value = "40";
        hum2.value = "60";
        person.value = "400";
        var canMoveValue = "0";
        window.localStorage.setItem("canMove", canMoveValue);
        //调用数字键盘
        $('#tem1')
            .keyboard({
                layout: 'num',
                restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in
                preventPaste: true,  // prevent ctrl-v and right click
                autoAccept: true
            });
        $('#tem2')
            .keyboard({
                layout: 'num',
                restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in
                preventPaste: true,  // prevent ctrl-v and right click
                autoAccept: true
            });
        $('#hum1')
            .keyboard({
                layout: 'num',
                restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in
                preventPaste: true,  // prevent ctrl-v and right click
                autoAccept: true
            });
        $('#hum2')
            .keyboard({
                layout: 'num',
                restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in
                preventPaste: true,  // prevent ctrl-v and right click
                autoAccept: true
            });
        $('#people')
            .keyboard({
                layout: 'num',
                restrictInput: true, // Prevent keys not in the displayed keyboard from being typed in
                preventPaste: true,  // prevent ctrl-v and right click
                autoAccept: true
            });
    })

    function toMain() {
        var canMoveValue = window.localStorage.getItem("canMove");
        var move = document.getElementById("gomain");
        console.log(canMoveValue);
        if (canMoveValue == "0") {
            move.href = "javascript:void(0);";
            window.parent.layerAlert('请采用策略!', {
                icon: 5,
                title: "提示"
            });
        }
        if (canMoveValue == "1") {
            move.href = "/multipower/main";
        }
    }

    // var opts = {
    //     lines: 13, // 花瓣数目
    //     length: 20, // 花瓣长度
    //     width: 10, // 花瓣宽度
    //     radius: 30, // 花瓣距中心半径
    //     corners: 1, // 花瓣圆滑度 (0-1)
    //     rotate: 0, // 花瓣旋转角度
    //     direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
    //     color: '#000', // 花瓣颜色
    //     speed: 1, // 花瓣旋转速度
    //     trail: 60, // 花瓣旋转时的拖影(百分比)
    //     shadow: false, // 花瓣是否显示阴影
    //     hwaccel: false, //spinner 是否启用硬件加速及高速旋转
    //     className: 'spinner', // spinner css 样式名称
    //     zIndex: 2e9, // spinner的z轴 (默认是2000000000)
    //     top: '25%', // spinner 相对父容器Top定位 单位 px
    //     left: '50%'// spinner 相对父容器Left定位 单位 px
    // };
    //
    // var spinner = new Spinner(opts);
    //
    // $(document).ready(function () {
    //     $("#get").bind("click", function () {
    //         Request();
    //         Request2();
    //     });
    // })
    //
    // function Request(){
    //     //请求时spinner出现
    //     var target = $("#firstDiv").get(0);
    //     spinner.spin(target);
    // }
    //
    // function Request2(){
    //     //关闭spinner,不飞spin传递参数表示关闭旋转等待
    //     if (document.readyState == "complete") {
    //         spinner.spin();
    //     }
    //
    // }
</script>
</body>
</html>